// 聊天counselor
<template>
  <div class="app-container home">
    <div class="counselor">
      <div
        :class="item.userId == toUserId ? 'comer_Cox' : 'comer_Box'"
        v-for="(item, index) in counselorList"
        :key="index"
        @click="advisory(item)"
      >
        <div class="profile" v-if="item.sex == '1'">
          <img src="@/assets/images/girl.png" alt="" />
        </div>
        <div class="profile" v-if="item.sex == '0'">
          <img src="@/assets/images/man.png" alt="" />
        </div>
        <div class="teachers">{{ item.name }}</div>
        <div class="online" v-if="item.ifOnline">在线</div>
        <div class="offline" v-if="!item.ifOnline">未在线</div>
      </div>
    </div>
    <!-- //on-refresh 对应下拉回调 on-infinite 对应上拉回调 -->
    <!--  style="height: 680px; background-color: #eceff7;bottom: 3rem;" -->
    <div class="chitchat">
      <scroller
        :on-refresh="reffor"
        :on-infinite="inffor"
        ref="scrfor"
        :scroll-top="30"
      >
        <div class="huasheu" v-for="(item, index) in List" :key="index">
          <div class="inner" v-if="item.innerHTML">
            <div class="profile" v-if="sex == '1'">
              <img src="@/assets/images/girl.png" alt="" />
            </div>
            <div class="profile" v-if="sex == '0'">
              <img src="@/assets/images/man.png" alt="" />
            </div>
            <div>{{ item.innerHTML }}</div>
          </div>
          <div class="words" v-if="item.wordsHTML">
            <div>{{ item.wordsHTML }}</div>
          </div>
        </div>
      </scroller>
      <div class="akf">
        <div class="bottom_box">
          <input type="textarea" v-model="value" />
          <button @click="send('SINGLE_SENDING')">发送</button>
        </div>
      </div>
    </div>
    <!-- <button onclick="closeWebSocket()">Close</button> -->
  </div>
</template>

<script>
import { historyPersons, historyPage } from "@/api/InternalPage/index";
export default {
  data() {
    return {
      websocket: null,
      value: "",
      innerHTML: null,
      wordsHTML: null,
      List: [],
      height: 650,
      counselorList: [],
      toUserId: null,
      sex: null,
      total: null,
      arr: [],
      // 查询参数
      queryParams: {
        pageNum: 0,
        pageSize: 18,
        toUserId: null,
      },
    };
  },
  mounted() {},
  created() {
    this.gethistory();
    this.chitchat();
    // console.log("uerID",)
  },

  methods: {
    gethistory() {
      historyPersons().then((res) => {
        this.counselorList = res.data;

        this.advisory(this.counselorList[0]);
      });
    },
    chitchat() {
      var than = this;
      //判断当前浏览器是否支持WebSocket
      if ("WebSocket" in window) {
        this.websocket = new WebSocket("ws://10.10.40.20:3333");
        // websocket = new WebSocket("ws://61.153.48.134:8260/api/websocket/test");
      } else {
        alert("Not support websocket");
      }

      //连接发生错误的回调方法
      this.websocket.onerror = function (event) {
        than.setMessageInnerHTML("error");
      };

      //连接成功建立的回调方法
      this.websocket.onopen = function (event) {
        console.log("链接", event);
        than.setMessageInnerHTML("open");
      };

      //接收到消息的回调方法
      this.websocket.onmessage = function (event) {
        than.setMessageInnerHTML(event.data);
      };

      //连接关闭的回调方法
      this.websocket.onclose = function () {
        this.setMessageInnerHTML("close");
      };
      //  this.send('REGISTER');
      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      // this.window.onbeforeunload = function () {
      //   websocket.close();
      // };
    },
    reffor() {
      if (this.toUserId) {
        this.queryParams.pageNum++;
        this.gitHistory();

        console.log("44", this.queryParams.pageNum);
      }
    },
    inffor() {
      if (this.toUserId) {
        this.queryParams.pageNum--;
        this.gitHistory();
      }
      console.log("55", this.queryParams.pageNum);
    },

    advisory(val) {
      this.toUserId = val.userId;
      this.queryParams.toUserId = val.userId;
      this.sex = val.sex;
      this.gitHistory();
    },
    gitHistory() {
      this.queryParams.toUserId = this.toUserId;
      historyPage(this.queryParams).then((res) => {
        res.data.records.forEach((e) => {
          if (e.fromUserId == this.queryParams.toUserId) {
            e.innerHTML = e.content;
          } else {
            e.wordsHTML = e.content;
          }
        });

        this.List = res.data.records;
        // this.List = this.List.concat(res.data.records);
        this.total = res.data.total;
        if (res.data.current == 1 && this.List.length == 0) {
          this.$refs.scrfor.finishInfinite(false);
        } else {
          this.$refs.scrfor.finishInfinite(true);
        }
        this.queryParams.pageNum = res.data.current;
        this.$refs.scrfor.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        console.log("77", this.List);
      });
    },
    setMessageInnerHTML(innerHTML) {
      if (innerHTML == "open") {
        this.send("REGISTER");
      }
      let froms = JSON.parse(innerHTML);
      if (froms.code !== 200) {
        this.$message({
          message: "该用户还未在线哦！",
          type: "warning",
        });
      }

      this.innerHTML = froms.content;
      let deat = {
        innerHTML: this.innerHTML,
      };
      this.List.push(deat);
    },
    //关闭连接
    closeWebSocket() {
      this.websocket.close();
    },

    //发送消息
    send(type) {
      var than = this;
      var date = null;

      if (type == "SINGLE_SENDING") {
        date = {
          type: "SINGLE_SENDING",
          toUserId: this.toUserId,
          fromUserId: this.$store.getters.userId,
          content: this.value,
        };
        this.queryParams.pageNum = 1;
        this.gitHistory();
      } else if (type == "REGISTER") {
        date = { type: "REGISTER", userId: this.$store.getters.userId };
      }
      than.websocket.send(JSON.stringify(date));
      // let datc = { wordsHTML: this.value };
      // this.List.push(datc);
      this.value = "";
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  display: flex;
  justify-content: space-between;
}
img {
  width: 100%;
  height: 100%;
}
.counselor {
  width: 30%;
  height: 700px;
  background-color: #eceff7;
  .comer_Box {
    width: 98%;
    height: 60px;
    border-radius: 5px;
    margin: 5px auto;
    display: flex;
  }
  .comer_Box:hover {
    border: 1.5px solid #0ae6c1;
  }
  .comer_Cox {
    width: 98%;
    height: 60px;
    border: 1.5px solid #0ae6c1;
    border-radius: 5px;
    margin: 5px auto;
    display: flex;
  }
  .profile {
    width: 55px;
    height: 55px;
    margin: auto 5px;
  }
  .teachers {
    height: 60px;
    line-height: 60px;
    margin-left: 10px;
  }
  img {
    border-radius: 50%;
  }
  .online {
    color: #73bd6e;
    margin-top: 5px;
    margin-left: 15px;
  }
  .offline {
    color: #bfb19e;
    margin-top: 5px;
    margin-left: 15px;
  }
}
.chitchat {
  width: 68%;
  height: 700px;
  position: relative;
  background-color: #eceff7;
  overflow: hidden;
  overflow-y: scroll;
}

.huasheu {
  width: 100%;

  // height: 90%;
}
.huasheu::after {
  content: "";
  display: block;
  clear: both;
}
.inner {
  width: 80%;
  float: left;
  height: 30px;
  line-height: 30px;
  margin: 10px 0;
  background-color: #fff;
  border-radius: 3px;
  display: flex;
  .profile {
    width: 30px;
    height: 30px;
    margin: auto 5px;
  }
}
.words {
  width: 80%;
  float: right;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background-color: #73bd6e;
  border-radius: 3px;
  margin: 10px 0;
  text-align: right;
}

.akf {
  width: 59%;
  position: fixed;
  top: 800px;
}
.bottom_box {
  position: relative;
  height: 48px;
}
input {
  width: 90%;
  height: 48px;
  border: 2px solid #73bd6e;
  border-right: 0;
}
input:focus {
  //获取焦点
  outline: 1px solid #73bd6e; //边框不用border，用outline
}

button {
  position: absolute;
  width: 10%;
  height: 48px;
  border: 2px solid #73bd6e;
  font-size: 18px;
  color: #73bd6e;
}
</style>